<template>
	<view class="activityDetails">
		<view class="con2">
			<image class="con2-qrc" :src="codeImg" mode=""></image>
		</view>

		<view class="con1">
			<view class="con1-name" @click="jump('store_name_up')"> {{info.title}} </view>
			<view class="con1-dp"> {{info.no}} </view>
		</view>
		<view class="con3" @click="jump('achievement', 'itemId='+info.id)">
			业绩：{{info.achievement}}
		</view>
		<view class="list-box" v-for="(item,index) in info.extensionInfo" :key="index" @click="jump(item.jumpType, item.jumpLink)">
			<view class="list-left"> {{item.title}} </view>
			<view class="list-right"> {{item.num}} </view>
		</view>
		
		
		<share-box ref="shareBox" :title="info.title + info.no" 
		:userName="info.username" :userPortrait="info.head_portrait" 
		:reduction_1="info.reduction_1" 
		:reduction_2="info.reduction_2" 
		:reduction_3="info.reduction_3" 
		:codeUrl="info.codeUrl" />
		<button class="sign" type="default" @click="showShare()">弹出海报</button>
		<!-- <view class="sign" @click="showCodeFun()">分享二维码</view> -->
	</view>
</template>

<script>
	var _self;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	import uniQrcode from '../static/wxqrcode.js';
	export default {
		data() {
			return {
				bottomHeight: 110,
				/* 底部按钮高度，避免iPhonex导航黑条 */
                id: 0,
				info: {
                    id: 0,
					title: '',
					no: '',
					codeUrl: '',
					posterUrl: '',
					orderNum: 0.00,
					orderMoney: 0.00,
					achievement: 0,
					achievementMoney: 0.00,
					extensionInfo: []
				},
				codeImg: '',
			}
		},
		methods: {
			getInfo() {
				serve.request({
					url: '/spread/index/main',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
                        itemId: _self.id
					}
				}).then(res => {
					if (res.code == 200) {
						_self.info = res.data;
						_self.codeImg = _self.info.codeUrl;
						// _self.codeImg = uniQrcode.createQrCodeImg(_self.info.codeUrl, {
						// 	size: parseInt(200)   
						// });
                        
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							success() {
								setTimeout(function() {
									uni.redirectTo({
										url: '/pages/my/my'
									});
								}, 2000)
							}
						});
					}
				});
			},
			showShare(){
				_self.$refs.shareBox.open();
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			_self = this;
            _self.id = options.id || 0;
            if(_self.id == 0) {
            	uni.showToast({
            		title: "错误的访问方式",
            		icon : 'none',
            		success:function(){ 
            			setTimeout(function () { 
            				common.jump('return_one')
            			}, 2000) 
            		} 
            	});
            	return;
            }
			if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
				_self.bottomHeight = 178;
			}
			_self.getInfo();
		},
		onPullDownRefresh() {
			_self.getInfo();
		},
	}
</script>

<style scoped>
	.activityDetails {
		padding: 0 36rpx;
		padding-bottom: 200rpx;
		font-size: 32rpx;
		color: #1e2022;
	}
	.con1 {
		padding: 20rpx 0;
		display: flex;
		text-align: center;
		justify-content: center;
	}
	.con1-name {
		text-align: center;
		line-height: 54rpx;
	}
	.con1-dp {
		width: 160rpx;
		text-align: center;
		color: #fff;
		background: red;
		height: 54rpx;
		font-size: 26rpx;
		border-radius: 40rpx;
		line-height: 54rpx;
		margin-left: 60rpx;
	}
	.con1-disc {
		display: flex;
		line-height: 80rpx;
	}
	.con1-no {}
	.con1-dj {
		margin-left: 36rpx;
	}
	.con2 {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
	}
	.con2-qrc {
		width: 300rpx;
		height: 300rpx;
	}
	.con3 {
		text-align: center;
		margin-top: 16rpx;
		padding: 20rpx;border-bottom: 2rpx solid #eaeaea;
	}
	.but-box {}
	.list-box {
		border-bottom: 2rpx solid #eaeaea;
		display: flex;
		justify-content: space-between;
		align-content: center;
		padding: 20rpx;
	}
	.but-box {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #ffffff;
	}

	.but1 {
		width: 250rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #2b85e4;
		color: #fff;
	}

	.but2 {
		width: 250rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #FFBC00;
		color: #fff;
	}

	.but3 {
		width: 250rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #dd6161;
		color: #fff;
	}

    
    .sign{
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	background: #FFC600;
    	position: fixed;
    	bottom: 0rpx;
    	width: 100%;
    	left: 0;
    	height: 100rpx;
    	font-weight: bold;
    	font-size: 32rpx;
    	color: #FFFFFF;
    	/* z-index: 9999; */
    }
    .pickupCode-box {
    	width: 100vw;
        height: 100vh;
    	background: #fff;
    	border-radius: 8rpx; 
    }
    .title-i {
    	width: 100%;
        text-align: center;
        color: #333333;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 36rpx;
    }
    .img{
    	width: 480rpx;
		height: 48rrpx;
		position: relative;
		left: 50%;
		margin-left: -240rpx;
		margin-top: 30rpx;
    }
    .pickupCode-t{
    	    width: 100%;
    	    text-align: center;
    	    height: 60rpx;
    	    line-height: 60rpx;
    	    letter-spacing: 8rpx;
    	    font-size: 40rpx;
    }
    .btn{
    	    width: 100%;
    	    height: 100rpx;
    	    text-align: center;
    	    line-height: 100rpx;
    	    font-size: 32rpx;
    	    color: #333333;
    }
    .nav {
    	display: flex;
    	width: 100%;
    	height: 120upx;
    	background: #FFFFFF;
    	z-index: 200;
    	align-items: center;
    	border-bottom: 1upx rgba(204, 204, 204, 0.3) solid;
    
    	
    }
    .nav_item {
    	width: 50%;
    	text-align: center;
        
    }
    
    .hover {
    	border-bottom: 8upx rgba(251, 202, 63, 1) solid;
    	color: rgba(35, 52, 91, 1) !important;
    	font-weight: bold;
    }
    
    .nav_name {
    	padding: 0upx 10upx;
    	display: inline-flex;
    	height: 32upx;
    	font-size: 32upx;
    	color: rgba(60, 72, 104, 0.5);
    }
</style>
